<template>
  <div>
    <el-dialog :title="obj.vAdd?'规格添加':'规格编辑'" :visible.sync="obj.isTrue" width="50%"
    @close="empty()">
      <el-form ref="form" :model="form" label-width="80px">
         <el-form-item label="规格名称">
            <el-input v-model="form.specsname "></el-input>
        </el-form-item>
        <el-form-item label="规格属性" v-for="(item,index) in strArr" :key="index">
         <div class="sumBox">
            <el-input v-model="item.val"> </el-input>
          <el-button v-if="index==0" @click="addAttr()">新增规格属性</el-button>
          <el-button v-else @click="preAttr(index)">删除</el-button>
         </div>
        </el-form-item>
       
        <el-form-item label="状态">
          <el-switch :active-value="1" :inactive-value="2" v-model="form.status"></el-switch>{{form.status}}
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="empty()" >取 消</el-button>
        <el-button v-if="obj.vAdd" type="primary" @click="add()" 
          >添加</el-button>
           <el-button v-else type="primary" @click="update()" 
          >编辑</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {specsadd,specsinfo,specsedit} from "../../../request/api.js";
import { successAlert, warningAlert } from "../../../utils/alert.js";
export default {
  props: ["obj"],
  components: {},
  data() {
    return {
      form: {
        specsname:"",
        attrs:"",
        status:1
      },
      strArr:[{val:""},{val:""}]
    };
  },
  computed: {
    ...mapGetters({}),
  },
  methods: {
    addAttr(){
      this.strArr.push({val:""})
    },
    preAttr(index){
       this.strArr.splice(index,1)
    },
    ...mapActions({
      list:"specs/asyncChangeList",
      totallist:"specs/asyncChangeTotal"
      
    }),
    // 封装重置form
    empty() {
      this.form={
         specsname:"",
        attrs:"",
        status:1
      }
      this.obj.isTrue=false
      this.strArr=[{val:""},{val:""}]
    },
    // 点击取消
    cancel() {
      this.empty()
    },
    // 点击添加
    add() {
   this.form.attrs=JSON.stringify(this.strArr.map(item=>item.val))
    specsadd(this.form).then(res=>{
      if(res.data.code==200){
        successAlert(res.data.msg)
        this.empty()
        this.list()
        this.totallist()
      }else{
        warningAlert(res.data.msg)
      }
    })
    },
    // 获取详情信息
 getOne(id){
   specsinfo({id:id}).then(res=>{
     this.form={
       ...res.data.list[0],
       attrs:JSON.parse(res.data.list[0].attrs)
     }
     this.strArr=this.form.attrs.map(item=>({val:item})
     )
   })
},
    // 点击编辑按钮
update(){
  this.form.attrs=JSON.stringify(this.strArr.map(item=>item.val))
  specsedit(this.form).then(res=>{
       if(res.data.code==200){
        successAlert(res.data.msg)
        this.empty()
        this.list()
      }else{
        warningAlert(res.data.msg)
      }
  })
}
  },
  mounted() {},
};
</script>
<style scoped>
.sumBox{
  display: flex;
}
.sumBox input{
  flex: 1;
}
</style>